<template>
  <view class="content">
    <view class="cell-group">
      <!-- #ifdef APP-PLUS -->
      <view class="cell-item" v-if="isSupportSoter">
        <view class="cell-left">
          <view class="cell-title">生物指纹验证</view>
          <view class="cell-tip">进入控制中心需要通过指纹认证</view>
        </view>
        <view class="cell-right">
          <switch :checked="fingerPrint" @change="fingerPrintSwitch" />
        </view>
      </view>
      <!-- #endif -->
      <view class="cell-item">
        <view class="cell-left">
          <view class="cell-title">密码验证</view>
          <view class="cell-tip">进入控制中心需要通过密码验证</view>
        </view>
        <view class="cell-right">
          <switch :checked="usePassword" @change="passwordPrintSwitch" />
        </view>
      </view>
    </view>

    <view class="cell-group">
      <view class="cell-item" @click="open">
        <view class="cell-left">
          <view class="cell-title">设置密码</view>
        </view>
        <view class="cell-right">{{ password ? "有密码" : "无密码" }}</view>
      </view>
    </view>

    <uni-popup ref="pwdRef" type="dialog">
      <uni-popup-dialog ref="inputClose" mode="base" title="输入密码" placeholder="请输入密码" @confirm="dialogInputConfirm" @close="tipClose">
        <view v-if="!password" class="password-box">
          <uni-easyinput type="password" :trim="true" :clearSize="0" adjust-position placeholder="请输入密码" v-model="my_password" />
        </view>
        <view v-else class="password-box">
          <uni-easyinput type="password" :trim="true" :clearSize="0" adjust-position placeholder="请输入旧密码" v-model="old_password" />
          <uni-easyinput type="password" :trim="true" :clearSize="0" adjust-position placeholder="请输入新密码" v-model="my_password" />
        </view>
      </uni-popup-dialog>
    </uni-popup>

    <uni-popup ref="noPasswordTip" type="dialog">
      <uni-popup-dialog ref="inputClose" mode="base" title="提示" content="还没有设置密码，点击【设置】设置密码" confirmText="设置" @confirm="open" @close="tipClose"> </uni-popup-dialog>
    </uni-popup>
  </view>
</template>

<script setup>
import { onBeforeMount, ref } from "vue";
import useSafeStore from "@/store/modules/safe.js";
import { storeToRefs } from "pinia";
import { useRouterCheck } from "@/composables/index.js";
// #ifdef H5
import { isAuthPass } from "@/utils/authentication.js";
// #endif
useRouterCheck();

// #ifdef APP-PLUS
import { IsSupportSoter, isAuthPass } from "@/utils/authentication.js";

onBeforeMount(() => {
  IsSupportSoterFunc();
});
// 判断是否支持指纹识别
let isSupportSoter = ref(false);
// 判断是否支持指纹识别
const IsSupportSoterFunc = async () => {
  isSupportSoter.value = await IsSupportSoter();
};

// 是否启用指纹识别
const fingerPrintSwitch = (e) => {
  if (isAuthPass()) return;
  if (!password.value) {
    noPasswordTip.value.open();
  } else {
    safeStore.saveFingerPrint(e.detail.value);
    if (e.detail.value) safeStore.savePasswordPrint(false);
  }
};
// #endif

// 引入pinia
let safeStore = useSafeStore();
let { password, fingerPrint, usePassword } = storeToRefs(safeStore);

// 是否启用密码识别
const passwordPrintSwitch = (e) => {
  if (isAuthPass()) return;
  if (!password.value) {
    noPasswordTip.value.open();
  } else {
    safeStore.savePasswordPrint(e.detail.value);
    if (e.detail.value) safeStore.saveFingerPrint(false);
  }
};

// 两个弹窗点击取消时的事件，用于刷新页面恢复切换器样式
const tipClose = () => {
  uni.redirectTo({
    url: "/" + getCurrentPages().pop().route,
  });
};

// 设置密码弹窗
const pwdRef = ref();
// 打开设置密码弹窗
const open = () => {
  if (isAuthPass()) return;
  my_password.value = "";
  if (password.value) old_password.value = "";
  pwdRef.value.open();
};

//旧密码
let old_password = ref("");
// 密码
let my_password = ref("");
// 保存密码
const dialogInputConfirm = () => {
  if (my_password.value.length === 0)
    return uni.showToast({
      title: "密码不可以为空",
      icon: "error",
      duration: 2000,
    });
  if (password.value) {
    if (safeStore.checkpassword(old_password.value)) {
      safeStore.savePassword(my_password.value);
      uni.showToast({
        title: "设置成功",
        icon: "success",
        duration: 2000,
      });
    } else {
      uni.showToast({
        title: "旧密码错误",
        icon: "error",
        duration: 2000,
      });
    }
  } else {
    safeStore.savePassword(my_password.value);
    uni.showToast({
      title: "设置成功",
      icon: "success",
      duration: 2000,
    });
  }
  tipClose();
};

// 没有密码提示的弹窗
const noPasswordTip = ref();
</script>

<style lang="scss" scoped>
.content {
  display: flex;
  flex-direction: column;
  background-color: #f3f3f3;
  gap: 20px;
  .cell-group {
    display: flex;
    flex-direction: column;
    background-color: #f3f3f3;
    .cell-item {
      background-color: #fff;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20rpx;
      box-sizing: border-box;
      border-bottom: 1px solid #f3f3f3;
      .cell-left {
        display: flex;
        flex-direction: column;
        .cell-title {
          color: #333;
        }
        .cell-tip {
          color: #999aaa;
          font-size: 12px;
        }
      }
      .cell-right {
        color: #999aaa;
      }
    }
  }
  .set-password-box {
    padding: 20rpx;
    height: 100rpx;
    width: 3000rpx;
    background-color: #fff;
    border-radius: 10px;
  }
  .password-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
}
</style>
